<template>
	<view class="move-boxs">
		<movable-area>
			<movable-view :out-of-bounds="false" :x="pos.x" :y="pos.y" direction="all" @change="onChange">
				<view @click="handleClickItem" class="image_120">
					<image mode="scaleToFill" style="width: 60px;height: 60px;" src="../../static/images/home/icon_group.png"></image>
					<view class="text-size-12 text-center text-bold text-menu-color">{{props.title}}</view>
				</view>
			</movable-view>
		</movable-area>
	</view>

</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		ref
	} from 'vue';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		value: {
			type: String,
			default: ''
		},
		icon:{
			type: String,
			default:'repairfill'
		},
		title:{
			type: String,
			default:'一键拼团'
		}
	});
	const pos = ref({
		x: 0,
		y: 0
	})
	const posOld = ref({
		x: 0,
		y: 0
	})
	let windowWidth = 0
	uni.getSystemInfo({
		success: (e : any) => {
			windowWidth = e.windowWidth - 70
			pos.value.x = windowWidth
			pos.value.y = e.windowHeight*0.1
			console.log(e.windowWidth)
		}
	});
	const onChange = (e : any) => {
		//console.log(e.detail.x, windowWidth)
		if (e.detail.x >= windowWidth) {
			//posOld.value.x = windowWidth
			pos.value.x = windowWidth
		} else {
			posOld.value.x = e.detail.x
		}

		posOld.value.y = e.detail.y
	}
	const handleClickItem = (e : any) => {
		emit('action',e)
	};
</script>

<style lang="scss" scoped>
	.image_120 {
		width: 120rpx;
		height: 120rpx;
		pointer-events: all;
		z-index: 9999;
	}

	movable-area {
		display: block;
		height: 100%;
		width: 100%;
	}

	.move-boxs {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 40vh;
		padding-right: 2rem;
		pointer-events: none;
				z-index: 9999;
	}
</style>